const DdWaterMark: any = {};

// tslint:disable-next-line: only-arrow-functions
DdWaterMark.install = function(Vue) {
  Vue.directive('ddwatermark', (el, binding) => {
    function addWaterMarker(str: string, parentNode: any, font: string, textColor: string) {
      // 水印文字，父元素，字体，文字颜色
      const can = document.createElement('canvas');
      parentNode.appendChild(can);
      can.width = 400;
      can.height = 300;
      can.style.display = 'none';
      const cans: any = can.getContext('2d');
      cans.rotate((-20 * Math.PI) / 180);
      cans.font = font + '  Microsoft JhengHei' || '16px Microsoft JhengHei';
      cans.fillStyle = textColor || 'rgba(180, 180, 180, 0.3)';
      cans.textAlign = 'left';
      cans.textBaseline = 'Middle';
      cans.fillText(str, can.width / 3, can.height / 2);
      parentNode.style.backgroundImage =
        'url(' + can.toDataURL('image/png') + ')';
    }
    addWaterMarker(
      binding.value.text,
      el,
      binding.value.fontSize,
      binding.value.textColor
    );
  });
};
export default DdWaterMark;
